import React from 'react'
import { Button, Modal } from 'antd'
import Table from '../../../components/Table'
import tableStyle from './index.less'

class AskFriendModalUI extends React.PureComponent {
  constructor (props) {
    super(props)

  }

  addFriends = () => {

  }

  render () {
    const { visible, onCancel, addFriends, tableData } = this.props
    const columns = [
      {
        title: '学号',
        dataIndex: 'readerId',
        key: 'readerId',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        search: true
      },
      {
        title: '性别',
        dataIndex: 'sex',
        key: 'sex',
        search: true
      },
      {
        title: '生日',
        dataIndex: 'birth',
        key: 'birth',
        search: true
      },
      {
        title: '地址',
        dataIndex: 'address',
        key: 'address',
        search: true
      },
      {
        title: '电话',
        dataIndex: 'telcode',
        key: 'telcode',
      },
      {
        title: 'QQ',
        dataIndex: 'qq',
        key: 'qq',
      },
      {
        title: '微信',
        dataIndex: 'weixin',
        key: 'weixin',
      },
      {
        title: '',
        dataIndex: 'addFriends',
        key: 'addFriends',
        width: '70px',
        render: (text, record) => {
          return (
            <Button name="addFriends" onClick={() => addFriends(record)}>加好友</Button>
          )

        }
      }

    ]
    return (
      <Modal
        title="问同学"
        width="1000px"
        open={visible}
        maskClosable={false}
        onCancel={onCancel}
        footer={[]}
      >
        <Table
          className={'modal-table-height'}
          rowKey={'readerId'}
          columns={columns}
          height={452}
          scroll={{ y: 400 }}
          dataSource={tableData}
          pagination={{
            showTotal: (total, range) => `第${range[0]}-${range[1]}条/共${total}条`,
            defaultPageSize: 10,
            showSizeChanger: true,
            pageSizeOptions: [10, 20, 50, 100, 200, 500],
          }}
        />
      </Modal>
    )
  }
}

export default AskFriendModalUI